<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导出账单 - 记账助手</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        /* 导出账单页面样式 */
        .export-header {
            background: #f8f9fa;
            padding: 20px;
            position: relative;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .back-btn {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #4a5568;
            text-decoration: none;
        }
        
        .export-title {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin: 0;
        }
        
        .export-section {
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .export-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        
        .export-card-title {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 15px;
        }
        
        .export-form {
            margin-bottom: 20px;
        }
        
        .export-options {
            margin-bottom: 15px;
        }
        
        .export-option {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .export-option input[type="radio"] {
            margin-right: 10px;
        }
        
        .export-option label {
            font-size: 14px;
            color: #4a5568;
        }
        
        .date-range {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            margin-bottom: 15px;
        }
        
        .date-input {
            flex: 1;
        }
        
        .export-btn {
            width: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            padding: 12px;
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            transition: all 0.3s ease;
        }
        
        .export-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
        .export-history-list {
            margin-top: 15px;
        }
        
        .export-history-item {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            position: relative;
        }
        
        .export-history-title {
            font-size: 15px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 5px;
        }
        
        .export-history-date {
            font-size: 12px;
            color: #718096;
            margin-bottom: 10px;
        }
        
        .export-history-status {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .status-pending {
            background: #fef3c7;
            color: #d97706;
        }
        
        .status-completed {
            background: #d1fae5;
            color: #059669;
        }
        
        .status-expired {
            background: #fee2e2;
            color: #dc2626;
        }
        
        .download-btn {
            display: inline-flex;
            align-items: center;
            background: #edf2f7;
            border: none;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 13px;
            color: #4a5568;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .download-btn:hover {
            background: #e2e8f0;
        }
        
        .download-btn i {
            margin-right: 5px;
        }
        
        .export-empty {
            text-align: center;
            padding: 30px 0;
            color: #a0aec0;
        }
        
        .export-empty-icon {
            font-size: 40px;
            margin-bottom: 10px;
        }
        
        .export-empty-text {
            font-size: 14px;
        }
        
        .notification-dot {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 10px;
            height: 10px;
            background-color: #e53e3e;
            border-radius: 50%;
        }
        
        /* 倒计时样式 */
        .countdown {
            font-size: 12px;
            color: #e53e3e;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="screen">
        <div class="app-container">
            <div class="export-header">
                <a href="user.html" class="back-btn">←</a>
                <h1 class="export-title">导出账单</h1>
            </div>
            
            <div class="export-section">
                <div class="export-card">
                    <h2 class="export-card-title">导出当前账本</h2>
                    <div class="export-form">
                        <div class="export-options">
                            <div class="export-option">
                                <input type="radio" id="export-all" name="export-range" value="all" checked>
                                <label for="export-all">导出全部记录</label>
                            </div>
                            <div class="export-option">
                                <input type="radio" id="export-month" name="export-range" value="month">
                                <label for="export-month">导出本月记录</label>
                            </div>
                            <div class="export-option">
                                <input type="radio" id="export-custom" name="export-range" value="custom">
                                <label for="export-custom">自定义时间范围</label>
                            </div>
                            
                            <div class="date-range" id="custom-date-range" style="display: none;">
                                <div class="date-input">
                                    <label class="form-label">开始日期</label>
                                    <input type="date" class="form-control" id="start-date">
                                </div>
                                <div class="date-input">
                                    <label class="form-label">结束日期</label>
                                    <input type="date" class="form-control" id="end-date">
                                </div>
                            </div>
                        </div>
                        
                        <div class="export-options">
                            <div class="export-option">
                                <input type="radio" id="export-excel" name="export-format" value="excel" checked>
                                <label for="export-excel">Excel格式 (.xlsx)</label>
                            </div>
                            <div class="export-option">
                                <input type="radio" id="export-csv" name="export-format" value="csv">
                                <label for="export-csv">CSV格式 (.csv)</label>
                            </div>
                            <div class="export-option">
                                <input type="radio" id="export-pdf" name="export-format" value="pdf">
                                <label for="export-pdf">PDF格式 (.pdf)</label>
                            </div>
                        </div>
                        
                        <button class="export-btn" id="submit-export">申请导出</button>
                    </div>
                </div>
                
                <div class="export-card">
                    <h2 class="export-card-title">导出历史</h2>
                    <div class="export-history-list" id="export-history-list">
                        <!-- 历史记录将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom-nav">
            <div class="nav-item" data-page="index.html">
                <div class="nav-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="nav-item" data-page="statistics.html">
                <div class="nav-icon">📊</div>
                <div>统计</div>
            </div>
            <div class="nav-item" id="quick-record-btn">
                <div class="nav-icon" style="font-size: 24px;">➕</div>
                <div>记账</div>
            </div>
            <div class="nav-item" data-page="details.html">
                <div class="nav-icon">📝</div>
                <div>明细</div>
            </div>
            <div class="nav-item active" data-page="user.html">
                <div class="nav-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>
    
    <!-- 一句话记账弹窗 -->
    <div class="quick-record" id="quick-record-modal">
        <div class="quick-record-header">
            <div class="quick-record-title">一句话记账</div>
            <div class="close-btn" id="close-quick-record">✕</div>
        </div>
        <div class="voice-input">
            <input type="text" class="voice-input-field" id="voice-input-field" placeholder="例如：今天午餐花了30元">
            <div class="mic-btn" id="mic-btn">🎤</div>
        </div>
        <button class="btn btn-primary" id="submit-quick-record">识别并记账</button>
    </div>
    
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>
    
    <!-- Bootstrap 模态框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="alertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="alertModalBody">
                    <!-- 动态内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化日期选择器默认值
        const today = new Date();
        const lastMonth = new Date(today);
        lastMonth.setMonth(today.getMonth() - 1);
        
        document.getElementById('start-date').valueAsDate = lastMonth;
        document.getElementById('end-date').valueAsDate = today;
        
        // 切换自定义日期范围显示
        document.querySelectorAll('input[name="export-range"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const customDateRange = document.getElementById('custom-date-range');
                if (this.value === 'custom') {
                    customDateRange.style.display = 'flex';
                } else {
                    customDateRange.style.display = 'none';
                }
            });
        });
        
        // 模拟导出历史数据
        const exportHistory = [
            {
                id: 1,
                title: '全部记录导出',
                date: '2023-12-15 14:30',
                status: 'completed',
                format: 'xlsx',
                expireTime: null,
                isNew: false
            },
            {
                id: 2,
                title: '2023年11月记录导出',
                date: '2023-11-30 10:15',
                status: 'expired',
                format: 'pdf',
                expireTime: null,
                isNew: false
            },
            {
                id: 3,
                title: '2023年10月记录导出',
                date: '2023-10-31 16:45',
                status: 'completed',
                format: 'csv',
                expireTime: null,
                isNew: false
            }
        ];
        
        // 渲染导出历史列表
        function renderExportHistory() {
            const historyList = document.getElementById('export-history-list');
            
            if (exportHistory.length === 0) {
                historyList.innerHTML = `
                    <div class="export-empty">
                        <div class="export-empty-icon">📄</div>
                        <div class="export-empty-text">暂无导出记录</div>
                    </div>
                `;
                return;
            }
            
            historyList.innerHTML = '';
            
            exportHistory.forEach(item => {
                let statusClass = '';
                let statusText = '';
                let downloadBtn = '';
                let countdownHtml = '';
                
                switch (item.status) {
                    case 'pending':
                        statusClass = 'status-pending';
                        statusText = '处理中';
                        break;
                    case 'completed':
                        statusClass = 'status-completed';
                        statusText = '已完成';
                        if (item.expireTime) {
                            countdownHtml = `<div class="countdown">文件将在 <span class="countdown-time" data-expire="${item.expireTime}"></span> 后过期</div>`;
                        }
                        downloadBtn = `<button class="download-btn" onclick="downloadExport(${item.id})">📥 下载</button>`;
                        break;
                    case 'expired':
                        statusClass = 'status-expired';
                        statusText = '已过期';
                        break;
                }
                
                const notificationDot = item.isNew ? '<div class="notification-dot"></div>' : '';
                
                historyList.innerHTML += `
                    <div class="export-history-item" id="export-${item.id}">
                        ${notificationDot}
                        <div class="export-history-title">${item.title}</div>
                        <div class="export-history-date">${item.date}</div>
                        <span class="export-history-status ${statusClass}">${statusText}</span>
                        ${countdownHtml}
                        <div>
                            ${downloadBtn}
                        </div>
                    </div>
                `;
            });
            
            // 更新倒计时
            updateCountdowns();
        }
        
        // 更新倒计时显示
        function updateCountdowns() {
            document.querySelectorAll('.countdown-time').forEach(el => {
                const expireTime = new Date(el.getAttribute('data-expire'));
                const now = new Date();
                const diff = expireTime - now;
                
                if (diff <= 0) {
                    // 已过期，更新状态
                    const itemId = el.closest('.export-history-item').id.split('-')[1];
                    const historyItem = exportHistory.find(item => item.id == itemId);
                    if (historyItem) {
                        historyItem.status = 'expired';
                        historyItem.expireTime = null;
                        renderExportHistory();
                    }
                    return;
                }
                
                // 计算剩余时间
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                
                let timeText = '';
                if (days > 0) {
                    timeText += `${days}天`;
                }
                if (hours > 0 || days > 0) {
                    timeText += `${hours}小时`;
                }
                timeText += `${minutes}分钟`;
                
                el.textContent = timeText;
            });
        }
        
        // 初始化倒计时更新定时器
        setInterval(updateCountdowns, 60000); // 每分钟更新一次
        
        // 下载导出文件
        function downloadExport(id) {
            const item = exportHistory.find(item => item.id === id);
            if (!item || item.status !== 'completed') return;
            
            // 模拟下载操作
            showAlert(`正在下载 ${item.title}.${item.format}...`);
            
            // 标记为已读
            item.isNew = false;
            renderExportHistory();
        }
        
        // 提交导出申请
        document.getElementById('submit-export').addEventListener('click', function() {
            // 获取导出选项
            const exportRange = document.querySelector('input[name="export-range"]:checked').value;
            const exportFormat = document.querySelector('input[name="export-format"]:checked').value;
            
            let title = '';
            let dateRange = '';
            
            // 根据选择的范围确定标题
            if (exportRange === 'all') {
                title = '全部记录导出';
            } else if (exportRange === 'month') {
                const now = new Date();
                const year = now.getFullYear();
                const month = now.getMonth() + 1;
                title = `${year}年${month}月记录导出`;
            } else if (exportRange === 'custom') {
                const startDate = document.getElementById('start-date').value;
                const endDate = document.getElementById('end-date').value;
                
                if (!startDate || !endDate) {
                    showAlert('请选择完整的日期范围');
                    return;
                }
                
                // 格式化日期为YYYY年MM月DD日
                const formatDate = (dateStr) => {
                    const date = new Date(dateStr);
                    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
                };
                
                title = `${formatDate(startDate)}至${formatDate(endDate)}记录导出`;
                dateRange = `${startDate} - ${endDate}`;
            }
            
            // 创建新的导出记录
            const now = new Date();
            const expireDate = new Date(now);
            expireDate.setDate(now.getDate() + 3); // 3天后过期
            
            const newExport = {
                id: exportHistory.length > 0 ? Math.max(...exportHistory.map(item => item.id)) + 1 : 1,
                title: title,
                date: now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }).replace(/\//g, '-'),
                status: 'pending',
                format: exportFormat,
                expireTime: null,
                isNew: true
            };
            
            // 添加到历史记录并重新渲染
            exportHistory.unshift(newExport);
            renderExportHistory();
            
            // 显示提示
            showAlert('导出申请已提交，系统正在处理中...');
            
            // 模拟后台处理
            setTimeout(() => {
                // 更新状态为已完成
                newExport.status = 'completed';
                newExport.expireTime = expireDate.toISOString();
                renderExportHistory();
                
                // 显示通知
                showAlert('账单导出已完成，请在3天内下载！');
            }, 3000);
        });
        
        // 底部导航切换页面
        document.querySelectorAll('.nav-item[data-page]').forEach(item => {
            item.addEventListener('click', function() {
                window.location.href = this.getAttribute('data-page');
            });
        });
        
        // 一句话记账功能
        const quickRecordBtn = document.getElementById('quick-record-btn');
        const quickRecordModal = document.getElementById('quick-record-modal');
        const closeQuickRecord = document.getElementById('close-quick-record');
        const overlay = document.getElementById('overlay');
        
        quickRecordBtn.addEventListener('click', function() {
            quickRecordModal.classList.add('active');
            overlay.classList.add('active');
        });
        
        closeQuickRecord.addEventListener('click', function() {
            quickRecordModal.classList.remove('active');
            overlay.classList.remove('active');
        });
        
        // 麦克风按钮点击事件
        const micBtn = document.getElementById('mic-btn');
        const voiceInputField = document.getElementById('voice-input-field');
        
        micBtn.addEventListener('click', function() {
            // 模拟语音识别
            showAlert('正在启动语音识别...');
            setTimeout(() => {
                voiceInputField.value = '今天午餐花了45元';
            }, 1500);
        });
        
        // 提交一句话记账
        const submitQuickRecord = document.getElementById('submit-quick-record');
        
        submitQuickRecord.addEventListener('click', function() {
            const inputText = voiceInputField.value.trim();
            if (!inputText) {
                showAlert('请输入或语音录入记账内容');
                return;
            }
            
            // 模拟识别处理
            showAlert('正在识别内容...');
            setTimeout(() => {
                // 关闭一句话记账弹窗
                quickRecordModal.classList.remove('active');
                overlay.classList.remove('active');
                
                // 跳转到记账页面
                window.location.href = 'index.html';
            }, 1500);
        });
        
        // Bootstrap 模态框函数
        function showAlert(message) {
            document.getElementById('alertModalBody').textContent = message;
            const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
            alertModal.show();
        }
        
        // 初始化渲染导出历史
        renderExportHistory();
    </script>
</body>
</html>